require(['./config'], () => {
  require(['template', 'header', 'footer','jquery','fdj', 'fly'], (template,header) => {
    class Detail {
      constructor () {
       this.getData().then(() => {
         this.addToCart()
		 this.Loupe()
		 this.Fly()
       })
      }
	  Loupe () {
		$(document).ready(function(){
			$(".jqzoom").imagezoom()
			$('.smallpic').on('click', function(){
				$('.jqzoom').attr('src',this.src)
			})
		})
	}
	Fly () {
	  $('#joinCart').on('click', (e) => {
		  var endBox = $('.my-cart')
		  var flyer = $(`<img
			style = "display : block ; width :50px; height : 50px; border-radius : 50px; position : fixed; z - index : 9999;" src = "${this.detail.photo[0].url}">`)
			flyer.fly({
				start:{
					left:e.clientX,
					top:e.clientY
				},
				end:{
					left:endBox.offset().left+endBox.innerWidth()/2,
					top:-endBox.innerHeight()-10,
					width:0,
					height:0
				},
				onEnd: function() {
					this.destory()
				}
			})
		  })
	  }
	  
      getData () {
        const id = location.search.slice(4)
		return new Promise((resolve, reject) => {
        $.get('http://www.xiongmaoyouxuan.com/api/detail', { id }, resp => {
          if (resp.code === 200) {
            const {
              id,
              title,
			  qunTitle,
              price,
              type,
              saleNum,
              couponStatus,
              accessoryHints,
              descContentList
            } = resp.data.detail
			let {photo} = resp.data.detail
			photo = photo.slice(0, 4)
			this.detail = {
			  id,
			  title,
			  qunTitle,
			  price,
			  photo,
			  type,
			  saleNum,
			  couponStatus,
			  accessoryHints,
			  descContentList
			}
            $('#detail-shop').html(
            template('detailTmplate', { ...this.detail })
                  )
                  // 渲染完成以后就可以resolve了
                  resolve()
                }
              })
              
            })
      }
	  addToCart () {
	    // 加入购物车
	    $('#joinCart').on('click', () => {
			
	      // 取，取出来之后判断购物车里是否已经有数据
	      //   如果没有，那就存入当前数据，但是也存一个数组，为下一次做准备
	      //   如果有了，那就把取出来的数据push当前这一条再重新存进去
	      let cart = localStorage.getItem('cart')
	      if (cart) {
	        // 购物车里已经有数据了
	        cart = JSON.parse(cart)
	        // 判断购物车里已存在的数据中是否包含当前数据
	        // 如果已存在就把数量加1（或者加数量输入框的值）
	        // 如果不存在才push
	        const isExist = cart.some(shop => {
	          return shop.id === this.detail.id
	        })
	        if (isExist) {
	          // 商品已存在
	          // 用map修改数组，满足条件就count加完再return，不满的话直接return shop本身
	          cart = cart.map(shop => {
	            if (shop.id === this.detail.id) {
	              shop.count++
				  if(shop.count>=6) shop.count=6
	            }
	            return shop
	          })
	        } else {
	          // 当前商品还没有被加过购物车
	          // 把当前商品push到数组里，也要写上默认数量为1，默认选中
	          cart.push({ ...this.detail, count: 1, check: true })
	        }
	        // 不管if还是else都要存cart，那就放在最后即可
	        localStorage.setItem('cart', JSON.stringify(cart))
	      } else {
	        // 购物车为空
	        // 把this.detail展开，再加上count字段和check，把这个对象放进数组，存入localStorage
	        localStorage.setItem('cart', JSON.stringify([ { ...this.detail, count: 1, check: true } ]))
		  }
	      // 调用header的方法计算总数量
	      header.calcCartCount()
	      })
	    }
	  }
    new Detail()
  })
})